<template>
  <div class="box">
    <van-nav-bar
      title="购物车"
      left-text="返回"
      left-arrow
      @click-left="onClickLeft"
    >
      <template #right>
        <van-popover
          v-model="showPopover"
          theme="dark"
          :actions="actions"
          @select="onSelect"
          placement="bottom-end"
        >
          <template #reference> 管理 </template>
        </van-popover>
      </template>
    </van-nav-bar>
    <div v-if="listlebght === 0">
      <van-empty description="暂无购物车" />
      <p class="goushop">
        <van-button round type="success" @click="gohome">立即购物</van-button>
      </p>
    </div>
    <ul v-if="listlebght !== 0">
      <li v-for="item in list" :key="item">
        <span
          ><van-checkbox
            v-model="item.flag"
            @change="changselectone(item.cartid, item.flag)"
        /></span>
        <van-swipe-cell>
          <div class="zhong">
            <img :src="item.img1" alt="" />
            <div class="smal">
              <p>
                {{ item.proname }}
              </p>
              <p class="p2">￥{{ item.originprice }}</p>
              <p class="p3">
                <van-stepper
                  v-model="item.num"
                  theme="round"
                  min="1"
                  @plus="changnum(item.cartid, item.num++)"
                  @minus="changnum(item.cartid, item.num--)"
                  button-size="22"
                  disable-input
                />
              </p>
            </div>
          </div>

          <template #right>
            <van-button
              @click="unaddcar(item.cartid)"
              square
              text="删除"
              type="danger"
              class="delete-button"
            />
          </template>
        </van-swipe-cell>
      </li>
    </ul>
    <p style="width: 100%; text-align: center; font-size: 14px">你可能还想要</p>
    <div class="tuijian">
      <tuiJian></tuiJian>
    </div>
    <van-submit-bar
      :price="price"
      decimal-length="1"
      button-text="提交订单"
      @submit="onSubmit"
    >
      <van-checkbox v-model="checked">全选</van-checkbox>
    </van-submit-bar>
  </div>
</template>
<script setup lang="ts">
import { showToast } from "vant";
import tuiJian from "../views/second/tuiJian.vue";
import {
  GoodsList,
  upDateNum,
  selectOne,
  selectAll,
  removeCar,
  removeCarAll,
} from "../server/produce";
import { ref, onMounted, computed } from "vue";
// import { useStore } from "vuex";
import { useRouter } from "vue-router";
import { useCounterStore } from "@/stores/counter";
// let store = useStore();
let store = useCounterStore();
let router = useRouter();
let showPopover = ref(false);
let list = ref<any>([]);
let listlebght = ref(0);
let actions = ref([{ text: "清空购物车", icon: "" }]);
let price = ref<any>("");
let checked = ref("");
onMounted(() => {
  getlist();
});
//总价
price = computed(() => {
  let dollor = 0;
  list.value.forEach((item: any) => {
    if (item.flag) {
      dollor += item.originprice * item.num;
    }
  });
  return Number(dollor) * 100;
});
//全选
checked = computed({
  get() {
    return list.value.every((item: any) => item.flag);
  },
  set(v) {
    list.value.forEach((item: any) => {
      item.flag = v;
    });
    allsel();
  },
});
//获取数据列表
function getlist() {
  let id = localStorage.getItem("userid");
  GoodsList({ userid: id }).then((res: any) => {
    if (res.code === "200") {
      list.value = res.data;
      listlebght.value = res.data.length;
    } else {
      listlebght.value = 0;
      // checked.value=false
    }
  });
}
function onClickLeft() {
  history.back();
}
//增加或减少购物数量
function changnum(cartid: any, num: any) {
  upDateNum({ cartid: cartid, num: num }).then((res: any) => {
    // console.log(res);
  });
}
//更改单条购物车选中状态
function changselectone(cartid: any, flag: any) {
  selectOne({ cartid: cartid, flag: flag }).then((res: any) => {
    // console.log(res);
  });
}
//修改全部选中状态
function allsel() {
  selectAll({
    userid: store.userid,
    type: checked.value,
  }).then((res: any) => {
    if (res.code === "200") {
      getlist();
    }
  });
}
function onSubmit() {}
//单条删除购物车
function unaddcar(carid: any) {
  removeCar({ cartid: carid }).then((res: any) => {
    if (res.code === "200") getlist();
  });
}
//如果购物车没有数据,可去选购,
function gohome() {
  router.push("/home");
}
//清空购物车
function onSelect(action: any) {
  showToast(action.text);
  let id = localStorage.getItem("userid");
  if (action.text === "清空购物车") {
    removeCarAll({ userid: id }).then((res: any) => {
      if (res.code === "200") {
        getlist();
      }
    });
  }
}
</script>

<style lang="scss" scoped>
.box {
  background-color: #f5f5f5;
}

ul {
  font-size: 14px;
  margin: 10px 0px;
  background-color: #f5f5f5;
  li {
    padding: 10px 0px;
    background-color: #f5f5f5;
    display: flex;
    justify-content: space-around;
    align-items: center;
    .zhong {
      display: flex;
      background-color: white;
      img {
        display: block;
        width: 100px;
        height: 100px;
      }
      .p2 {
        margin-top: 20px;
        color: red;
      }
      .p3 {
        text-align: right;
      }
      p {
        padding: 0px 20px 0px 0px;
        margin: 5px 0px;
      }
    }
  }
}
.tuijian {
  width: 100%;
}
.goods-card {
  margin: 0;
  background-color: white;
}

.delete-button {
  height: 100%;
}
.goushop {
  text-align: center;
  button {
    padding: 10px 50px;
  }
}
.delall {
  font-size: 14px;
  text-align: right;
  .span {
    background-color: white;
    border-radius: 10px;
    padding: 10px;
    margin-top: 10px;
  }
}
</style>
